<template>
    <div class="container">
        <el-row :gutter="20" v-for="item in Math.ceil(menuList.length / 3)">
            <el-col :span="8" v-for="ele in menuList.slice((item - 1) * 3, item * 3)">
                <el-card @click="openWindow(ele)">
                    <div>{{ ele.name }}</div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
const menuList = [
    {
        name: 'Chat',
        value: 'chat'
    },
    {
        name: '井字棋',
        value: 'jing'
    },
    {
        name: '五子棋',
        value: 'five'
    }
]
const openWindow = (item) => {
    window.electron.ipcRenderer.send('openWindow', item.value);
}
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    padding: 10px;
    // background: #fff;
    border: 1px solid #333;
    border-radius: 10px;

    .el-row {
        margin-bottom: 20px;
    }

    .el-card {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        background-color: #333;
        color: #fff;
        -webkit-app-region: no-drag;

        &:hover {
            background-color: #fff;
            color: #333;
            border: 1px solid #333;
            transition: 0.3s;
        }
    }
}
</style>